<template>
	<view class="reporter-content">
		<view class="bg-box">
			<view class="userinfo">
				<view class="left">
					<img class="headPortrait" :src="userInfo.headPortrait" alt="">
					<view class="l-icon"></view>
				</view>
				<view class="right">
					<view class="txt nameBox">
						<view class="name">{{userInfo.name}}</view>
						中国房地产报记者
					</view>
					<view class="txt">{{userInfo.motto}}</view>
					<view class="txt wxtxt">微信：{{userInfo.wechat}}</view>
					<view class="txt emtxe">邮箱：{{userInfo.email}}</view>
				</view>
			</view>
			<view class="lin-title">
				<view class="t-icon"></view>
				热门文章
			</view>
			<view class="news-listbox">
				<view class="news-content" v-for="(item,index) in newslist" :key="item.id" @click="toDetail(item)">
					<view class="news-left">
						<view class="news-title">{{item.title}}</view>
						<view class="news-dis">{{item.description}}</view>
					</view>
					<view class="news-rigth">
						<view class="dis-img">
							<image class="attr_thumb" :src="item.thumb" mode=""></image>
						</view>
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				id: null,
				userInfo: {},
				newslist: [],
			}
		},
		onLoad(options) {
			this.id = options.id
			console.log(options.id)
			this.getReporter()
			this.getReporterList()
		},
		methods: {
			toDetail(row) {
				// console.log(row)
				uni.navigateTo({
					url:'/pages/index/news-detail/news-detail?id=' + row.id + '&link=' + row.url
				})
			},
			getReporter() {
				var _this = this
				api.request({
				  method: 'get',
				  coverUrl: 'http://www.creb.com.cn/api/front/content/reporters?idStr='+this.id,
				  clear: true,
				  data: {}
				}).then(response => {
				    console.log(response);
					this.userInfo = response[0]
					uni.setNavigationBarTitle({
						title: '中国房地产报记者'+response[0].name
					});
				  })
				  .catch(err => {
				    console.error(err);
				  });
			},
			getReporterList() {
				var _this = this
				api.request({
				  method: 'get',
				  coverUrl: 'http://www.creb.com.cn/api/front/content/list?rid='+this.id,
				  clear: true,
				  data: {}
				}).then(response => {
				    console.log(response);
					this.newslist = response
				  })
				  .catch(err => {
				    console.error(err);
				  });
			}
		}
	}
</script>

<style>
.reporter-content{
	width: 100%;
	min-height: 100vh;
	background: #F5F5F5;
}
.bg-box{
	margin: 0 7px;
	min-height: 100vh;
	background-color: #fff;
}
.userinfo{
	padding: 15px;
	border-radius: 4px;
	color: #fff;
	background-color: #018FFF;
	display: flex;
	justify-content: space-between;
}
.left{
	width: 90px;
	display: flex;
	align-items: flex-start;
	position: relative;
}
.headPortrait{
	width: 70px;
	height: 70px;
	border-radius: 70px;
	margin-top: 10px;
}
.l-icon{
	position: absolute;
	right: 21px;
	bottom: 29px;
	width: 21px;
	height: 21px;
	background: url("http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202111/100925541m3u.png") no-repeat center;
	background-size: 21px;
}
.right{
	flex: 1;
}
.txt{
	margin-top: 4px;
	font-size: 12px;
}

.nameBox{
	display: flex;
	align-items:  baseline;
}
.name{
	font-size: 17px;
	margin-right: 10px;
}
.wxtxt{
	margin-top: 8px;
	line-height: 17px;
}
.emtxe{
	line-height: 17px;
	margin-top: 0;
}
.lin-title{
	margin: 0 15px;
	padding: 5px 0;
	font-size: 15px;
	display: flex;
	align-items: center;
}
.t-icon{
	margin-right: 5px;
	width: 17px;
	height: 17px;
	background: url("http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202111/10092901wqtz.png") no-repeat center;
	background-size: 17px;
}
.news-listbox{
	margin: 0 15px;
}
.news-content{
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #e4e4e4;
	padding:7px 0;
	margin-bottom: 10px;
}
.news-left{
	margin-right: 10px;
}
.news-title{
	font-size: 14px;
	line-height: 18px;
}
.news-dis{
	margin-top: 4px;
	font-size: 12px;
	line-height: 14px;
	color: #616161;
}
.news-rigth{
	display: flex;
	align-items: flex-start;
}
.dis-img,.attr_thumb{
	width: 85px;
	height: 65px;
}
</style>
